<template>
  <div>
  <el-table
      :data="account"
      border
      style="width: 100%">
      <el-table-column
        fixed
        prop="account"
        label="账号"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="用户名"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="accountPhone"
        label="手机号"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="accountEmail"
        label="邮箱"
        width="300px">
      </el-table-column>
      <el-table-column
        prop="accountState"
        label="状态"
        width="300">
        <template slot-scope="scope">
          <span>
            {{scope.row.accountState == 0 ? '禁用': "启用"  }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="setState1(scope.row.account)" type="text" size="small">启用</el-button>
          <el-button @click="setState2(scope.row.account)" type="text" size="small">禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.current"
        :page-sizes="[3,6]"
        :page-size="this.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
      </el-pagination>
    </div>
   </div>
</template>

<script>
  export default{
    name:"AccountManageement",
    data(){
    	return{
        account:[],
        total:"",
        current: "",
        pageSize: "",
    	}
    },
    methods:{
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
          this.getAccount(this.current,val)
      },
      //分页-改变页数
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
          this.getAccount(val,this.pageSize)
      },
      getAccount(pageNum,pageSize){
        this.$http.get("/account/getAllStudent",{
          params:{
            pageNum:pageNum,
            pageSize:pageSize
          }
        }).then(resp=>{
          console.log(resp)
        	if(resp.data.code==200){
            this.account=resp.data.data.records
            this.total=resp.data.data.total
            this.pageSize=resp.data.data.size
            this.current=resp.data.data.current
          }
        })
      },
      setState1(account){
        this.$http.get("/account/setAccountState",{
          params:{
            account:account,
            state:1
          }
        }).then(resp=>{
         if(resp.data.code==200){
           alert("修改成功")
           this.getAccount(this.current,this.pageSize)
         }
          })
        }
      ,
      setState2(account){
        this.$http.get("/account/setAccountState",{
          params:{
            account:account,
            state:0
          }
        }).then(resp=>{
          if(resp.data.code==200){
            alert("修改成功")
            this.getAccount(this.current,this.pageSize)
          }
        })
      }
    },
    created() {
      this.getAccount()
    }
  }

</script>

<style>
</style>
